<template>
  <view class="goods">
    <image :src="good.pic" mode="aspectFill" class="goods__image" alt @tap.stop="gotoDeatil"></image>
    <view :class="'goods__info ' + (good.status===1 && checkStock!=0 ? '' : 'padding')">
      <view :class="' ' + (good.status===1 && checkStock!=0 ? 'goods--hasName' : 'goods--name')" @tap.stop="gotoDeatil">
        {{good.productName}}
      </view>
        <view class="goods--num " @tap.stop="getSku" v-if="good.skuName!='' && checkStock!=0">
          <view class="skuName">
            {{good.skuName}}
          </view>
          <u-icon name="arrow-down" class="goods--icon" size="14"></u-icon>
        </view>
        <view class="goods--noNum " v-if="good.skuName!='' && checkStock===0">
          {{good.skuName}}
        </view>
      <view class="goods--specification" v-if="good.status===1 && checkStock!=0">
        <span class="goods--price">
          <view class="product__price">
            <span>{{intPrice}}</span>
            <span style="font-weight:weight;font-size:13px;">.{{smaPrice}}</span>
          </view>
        </span>
        <slot></slot>
      </view>
      <view v-if="good.status===1 && checkStock===0 && good.skuStocks.length>1">
        <view class="goods--reTry">
          请重新选择规格
          <view class="button" @tap.stop="getSku">重选</view>
        </view>
        <view v-if="good.status!==1">
          <view class="soldOut">
            <view>{{good.status===2 ? '已售罄' : '已下架'}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import mIcon from "@/components/m-icon/m-icon.vue"
  import stepper from '@/components/stepper/stepper.vue'
  @Component({
    components: {
      mIcon,
      stepper
    }
  })
  export default class Goods extends Vue {
    @Prop()
    good:any
    @Prop()
    checkStock: number
    intPrice: string = ""
    smaPrice: string = ""
    created() {
      this.goodChange()
    }
    @Watch("good")
    goodChange() {
      if (this.good) {
        const good = this.good;
        let intPrice = ""
        let smaPrice = ""
        if (good.actPrice) {
          intPrice = good.actPrice.toFixed(2).split(".")[0];
          smaPrice = good.actPrice.toFixed(2).split(".")[1];
          this.intPrice = intPrice
          this.smaPrice = smaPrice
        }
      }
    }
    gotoDeatil() {
      const good = this.good;
      uni.navigateTo({
        url: `/subcontract/pages/detail/detail?id=${good.productId}&img=${good.pic}`,
      });
    }

    getSku() {
      this.$store.commit('settingStore/setTabVisible', false);
      const good = this.good;
      const options = {
        id: good.goodId,
        skuId: good.skuId  
      };
      this.$emit("getSku", options); // 通过triggerEvent将参数传给父组件
    }

    changeNum(options) {
      this.$emit("changeNum", options);
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/_var.scss";

  .goods {
    @include flex(space-between, flex-start);
    $s: 95px;

    .goods__image {
      width: $s;
      height: $s;
      flex: 1 0 $s;
      margin-right: 10px;
      border-radius: 10px;
    }

    .goods--hasName {
      font-size: 13px;
      font-weight: bold;
      color: #535353;
    }

    .goods--name {
      font-size: 13px;
      font-weight: bold;
      color: #9c9c9c;
    }

    .goods__info {
      @include flex(space-between, space-between);
      flex-direction: column;
      width: 220px;
      padding-right: 24px;
      height: $s;
      .goods--specification {
        @include flex(space-between, flex-start);

        width: 100%;
        color: #9c9c9c;
      }

      .goods--price {
        .important {
          font-size: 16.5px;
          color: #FF4444;
          font-weight: bold;
        }
      }

      .goods--num {
        font-size: 11px;
        color: #333333;
        background: #ececec;
        display: flex;
        align-items: center;
        border-radius: 50px;
        border: 1px solid $main-border-color;
        padding: 5px 10px 5px 10px;
        align-self: baseline;
      }

      .goods--noNum {
        display: flex;
        width: 90px;
        font-size: 12px;
        color: #9c9c9c;
      }

      .goods--icon {
        margin-left: -17px;
      }

      .goods--reTry {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
        color: #333333;
        font-size: 14px;

        .button {
          width: 60px;
          height: 25px;
          @include flex(center, center);
          border: 1px solid #F84642;
          color: #F84642;
          border-radius: 40px;
        }
      }
    }
  }

  .padding {
    padding-bottom: 30px;
  }

  .soldOut {
    color: black;
    margin-top: 56px;
    font-size: 15px;

  }

  .product__price {
    font-size: 17px;
    font-weight: bold;
    color: #FA5555;
  }

  .product__price::before {
    content: '￥';
    font-weight: normal;
    font-size: 13px;
  }
</style>